<script setup>
defineOptions({
  name: "managementDetail"
});
import { useRouter, useRoute } from "vue-router";
import { getInfoAgen } from "@/api/merchant";
import { ref } from "vue";

const router = useRouter();
const route = useRoute();
const detail = ref({});
const detailDtlList = ref({})
const loading = ref(true)
getInfoAgen(route.query.id).then((res) => {
  detail.value = res.data;
  if (res.data && res.data.dtlList && res.data.dtlList.length) {
    detailDtlList.value = res.data.dtlList[0]
  }
}).finally(() =>{
  loading.value = false
});

const getBack = () => {
  router.go(-1);
};
</script>
<template>
  <div>
    <div class="back">
      <div @click="getBack" class="back-text">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
        <span>返回</span>
      </div>
    </div>
    <div class="c-page c-page__bg c-page-info" v-loading="loading">
      <el-form class="c-form">
        <h1 class="c-page-info__title">基本信息</h1>
        <el-form-item label-width="230px" label="营业执照">
          <el-image
            class="el-image"
            :src="detail.doorPhotograph"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[detail.doorPhotograph]"
            :initial-index="4"
            fit="cover"
          />
        </el-form-item>
        <el-form-item label-width="230px" label="企业名称">{{
          detail.enterpriseName
        }}</el-form-item>
        <el-form-item label-width="230px" label="纳税人识别号">{{
          detail.taxpayerIdentificationNumber
        }}</el-form-item>
        <el-form-item label-width="230px" label="注册地址">{{
          detail.enterpriseRegistrationAddress
        }}</el-form-item>
        <el-form-item label-width="230px" label="法人姓名">{{
          detail.corporateJuridicalPerson
        }}</el-form-item>
        <el-form-item label-width="230px" label="手机号">{{
          detail.adminMobile
        }}</el-form-item>
        <el-form-item label-width="230px" label="管理员姓名">{{
          detail.adminName
        }}</el-form-item>
        <el-form-item label-width="230px" label="管理员手机号">{{
          detail.adminMobile
        }}</el-form-item>
        <h1 class="c-page-info__title">风控信息</h1>
        <el-form-item label-width="230px" label="门头照片">
          <el-image
            class="el-image"
            :src="detail.doorPhotograph"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[detail.doorPhotograph]"
            :initial-index="4"
            fit="cover"
          />
        </el-form-item>
        <el-form-item label-width="230px" label="办公场景照片">
          <el-image
            class="el-image"
            :src="detail.corporatePhotos"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[detail.corporatePhotos]"
            :initial-index="4"
            fit="cover"
          />
        </el-form-item>
        <el-form-item label-width="230px" label="主营业务描述">{{
          detail.mainBusiness
        }}</el-form-item>
        <el-form-item label-width="230px" label="项目名称">{{
          detail.projectName
        }}</el-form-item>
        <el-form-item label-width="230px" label="开票类目">{{
          detail.categoryOfInvoice
        }}</el-form-item>
        <el-form-item label-width="230px" label="项目内容（用工场景">{{
          detail.projectContent
        }}</el-form-item>
        <el-form-item label-width="230px" label="灵工业务地点">{{ detail.projectSettlementRules }}</el-form-item>
        <el-form-item label-width="230px" label="自由职业者结算规则">{{ detail.projectSettlementRules }}</el-form-item
        >
        <el-form-item label-width="230px" label="单月销售总金额">{{ detail.monthVolume }}</el-form-item>
        <el-form-item label-width="230px" label="实际办公地址">{{ detail.actualBusinessAddress }}</el-form-item>
        <h1 class="c-page-info__title">材料补充</h1>
        <el-form-item label-width="230px" label="业务合同">
          <el-image
            v-if="detailDtlList.serviceCompanyFiles"
            class="el-image"
            :src="detailDtlList.serviceCompanyFiles"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[detailDtlList.serviceCompanyFiles]"
            :initial-index="4"
            fit="cover"
          />
          <template v-else>
            -
          </template>
        </el-form-item>
        <el-form-item label-width="230px" label="进销项发票">
          <el-image
            v-if="detailDtlList.invoiceFiles"
            class="el-image"
            :src="detailDtlList.invoiceFiles"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[detailDtlList.invoiceFiles]"
            :initial-index="4"
            fit="cover"
          />
          <template v-else>
            -
          </template>
        </el-form-item>
        <el-form-item label-width="230px" label="完税凭证">
          <el-image
            v-if="detailDtlList.dutyPaidProofFiles"
            class="el-image"
            :src="detailDtlList.dutyPaidProofFiles"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[detailDtlList.dutyPaidProofFiles]"
            :initial-index="4"
            fit="cover"
          />
          <template v-else>
            -
          </template>
        </el-form-item>
        <el-form-item label-width="230px" label="场景视频">
          <!-- {{ detailDtlList.sceneVideoFiles }} -->
            -
        </el-form-item>
        <el-form-item label-width="230px" label="其他材料">{{ detailDtlList.otherFiles ? detailDtlList.otherFiles : '-' }}</el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style scoped lang="scss">
.c-page-info__title {
  margin-block: 0;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 400;
  color: #262626;
}

.el-image {
  width: 80px;
  height: 80px;
}

.c-page-info {
  ::v-deep .el-form-item__label {
    font-size: 14px;
    color: #8c8c8c;
    padding-right: 20px;
    font-weight: 400;
  }
  ::v-deep .el-form-item__content {
    padding-right: 100px;
  }
}

.back {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #1c9fff;
  padding-bottom: 10px;

  .back-text {
    display: flex;
    align-items: center;
    padding-right: 5px;
    font-size: 16px;
    cursor: pointer;
  }

  .title {
    color: #8c8c8c;
    font-size: 16px;
  }
}
</style>
